<template>
  <div class="personal">
    <div>
      <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" class="NavBar" border />
    </div>
    <!-- 用户信息 -->
    <div class="cellBor">
      <van-cell title="头像" style="align-items: center" border>
        <van-image round width="1rem" height="1rem" :src="my_images" />
      </van-cell>
      <van-cell-group class="cellBor2" border>
        <van-cell title="用户名" :value="my_user" border />
        <van-cell title="姓名" :value="my_name" border />
        <van-cell title="性别" :value="my_sex" border />
        <van-cell title="手机号" :value="my_tel" border />
        <van-cell title="班级" :value="my_class_name" border />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'personal',
  data() {
    return {
      // id: localStorage.getItem('id')
      my_images: '',
      my_name: localStorage.getItem('username'),
      my_sex: '',
      my_user: '',
      my_tel: '',
      my_images: '',
      my_class_name: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    }
  },
  // 单页面背景
  beforeRouteEnter(to, from, next) {
    document.querySelector('body').setAttribute('style', 'background-color:rgb(216, 216, 216)')
    next()
  },
  beforeRouteLeave(to, from, next) {
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  mounted() {
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/index',
      data: {
        id: localStorage.getItem('id')
      }
    }).then((res) => {
      this.my_images = res.data.img
      this.my_sex = res.data.sex
      this.my_tel = res.data.tel
      this.my_user = res.data.id_card
      this.my_images = res.data.img
      this.my_class_name = res.data.class_name
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cellBor2 {
  margin-top: 0.7rem;
}
.NavBar {
  background-color: rgb(216, 216, 216);
}
</style>
